<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机书评网</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <!-- 引入样式文件 -->
    <link
            rel="stylesheet"
            href="/assets/vant/index.css"
    />

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="/assets/vue/vue.global.js"></script>
    <script src="/assets/vant/vant.min.js"></script>
    <script src="/assets/axios/axios.js"></script>
    <style>
        .description {
            padding: 5px;
        }

        .description p {
            text-indent: 2em;
            line-height: 30px;
        }

        .description img {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <!--导航栏 -->
    <van-nav-bar @click-right="clickRight">
        <template #left>
            <a href="/" style="padding-top: 10px">
                <img src="/images/logo2.png" style="width: 80px">
            </a>
        </template>
        <template #right>
            <template v-if = "state.isLogin">
                <img src="/images/user_icon.png" style="height:30px">{{state.member.nickname}}
            </template>
            <template v-if = "!state.isLogin">
                <img src="/images/user_icon.png" style="height: 30px">
                登录
            </template>

        </template>
    </van-nav-bar>

    <van-row style="padding: 10px;color:white;font-size: 80%;background: rgb(127, 125, 121)">
        <van-col span="8" style="float: left;width: 110px;height: 160px">
            <img style="width: 110px;height: 160px"
                 :src="book.cover">
        </van-col>
        <van-col span="16" style="float: left;height: 160px;width:auto">
            <div style="font-size: 16px;font-weight: bold">{{book.bookName}}</div>
            <div style="margin-top:5px;background: #92B8B1;padding: 5px">{{book.author}}</div>
            <div style="font-size: 16px;margin-top:5px;">{{book.subTitle}}</div>
            <div style="padding:10px">
                <template v-if="state.readState == -1">
                    <van-button size="small" icon="like-o" type="default" style="margin-right: 10px" @click="updateReadState(1)">想看</van-button>
                    <van-button size="small" icon="passed" type="default" @click="updateReadState(2)">看过</van-button>
                </template>
                <template v-if="state.readState == 1">
                    <van-button size="small" icon="like" type="success" style="margin-right: 10px" @click="updateReadState(1)">想看</van-button>
                    <van-button size="small" icon="passed" type="default" @click="updateReadState(2)">看过</van-button>
                </template>

                <template v-if="state.readState == 2">
                    <van-button size="small" icon="like-o" type="default" style="margin-right: 10px" @click="updateReadState(1)">想看</van-button>
                    <van-button size="small" icon="checked" type="success" @click="updateReadState(2)">看过</van-button>
                </template>
            </div>
        </van-col>
        <van-col span="24" style="background-color: rgba(0,0,0,0.1);padding: 10px;margin-top: 10px">
            <span style="line-height: 20px;margin-right: 10px">{{book.evaluationScore}}分 {{book.evaluationQuantity}}人已评</span>
            <van-rate v-model="book.evaluationScore" color="#ffd21e" void-icon="star" readonly allow-half></van-rate>
        </van-col>
    </van-row>
    <div class="description" v-html="book.description"></div>
    <van-nav-bar style="background: lightblue">
        <template #left>
            短评
        </template>
        <template #right>
            <van-button type="success" size="small" style="width:60px" @click="showDialog()">评价</van-button>
        </template>
    </van-nav-bar>
    <!--短评列表,通过迭代EvaluationList实现-->
    <template v-for="evaluation,index in evaluationList">
    <div style="border-bottom: 1px solid #cccccc">
        <div style="padding: 10px;">
            <!-- 短评创建时间 -->
            <span style="margin-right: 20px">{{evaluation.ct}}</span>
            <!-- 用户昵称 -->
            <span style="margin-right: 20px">{{evaluation.nickname}}</span>
            <!-- 星型分数 -->
            <van-rate v-model="evaluation.score" color="#ffd21e" void-icon="star" readonly allow-half></van-rate>
            <van-button icon="like-o" @click="enjoy(index)" type="success" size="small" style="width:40px;float:right" >{{evaluation.enjoy}}</van-button>
        </div>
        <!-- 评论内容 -->
        <div style="padding: 10px;">
            {{evaluation.content}}
        </div>
    </div>
    </template>
    <div style="margin-bottom: 50px">
    </div>

    <van-action-sheet v-model:show="state.dialogVisible" :title="book.bookName">
        <van-form ref="evaluationForm">
            <van-cell-group inset>
                <van-rate v-model="form.score" color="#ffd21e" void-icon="star" style="padding: 16px" ></van-rate>
                <van-field
                        v-model="form.content"
                        name="content"
                        placeholder="这里输入评论内容"
                        autocomplete = "off"
                        :rules="[{ required: true, message: '请输入评论内容' }]"
                />
            </van-cell-group>
            <div style="margin: 16px;margin-bottom: 50px">
                <van-button round block type="primary" @click="onSubmit('evaluationForm')">
                    提交短评
                </van-button>
            </div>
        </van-form>
    </van-action-sheet>

</div>
<script>
    //日期格式化函数
    function formatDate(time){
        var newDate = new Date(time);
        return (newDate.getMonth() + 1) + "-" + newDate.getDate();
    }
    //获取查询字符串函数
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    //提示"需要登录"对话框
    function warnLogin(text){
        vant.Dialog.confirm({
            title: text,
            confirmButtonText: "去登录",
            cancelButtonText: "关闭"
        })
        .then(() => {
            window.location.href = "/login.html";
        })
    }

    const main = {
        data() {
            return {
                state : { //页面状态
                    isLogin: false, //是否登录
                    member:{}, //当前登录会员数据
                    readState : -1, //当前会员阅读状态 -1:无数据 1:想看 2:看过
                    dialogVisible : false //短评对话框是否显示
                },
                book: {
                },
                evaluationList:[], //短评列表
                form: { //短评表单数据
                    score:5,
                    content:""
                }
            }
        }
        , methods: {
            showEvaluationList: function(bookId , isFlush){
                const objApp = this;
                axios.get("/api/evaluation/list?bookId=" + bookId)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            if(isFlush){
                                objApp.evaluationList.splice(0, objApp.evaluationList.length);
                            }
                            const list = json.data.list;
                            list.forEach(function(item){
                                item.ct = formatDate(item.create_time);
                                objApp.evaluationList.push(item);
                            })
                        }else{
                            console.error(json);
                        }
                    });
            }
            //显示短评对话框
            ,showDialog:function(){
                const objApp = this;
                if(!objApp.state.isLogin){
                    warnLogin("登录后才能进行评论哦");
                    return;
                }
                this.state.dialogVisible = true;
            }
            ,clickRight:function(){
                //点击"登录"按钮跳转到登录页
                if(!this.state.isLogin){
                    window.location.href = "/login.html";
                }
            }
            ,updateReadState:function(readState){
                //更新阅读状态
                const memberId = sessionStorage.mid;
                const bookId = getQueryString("bid");
                const objApp = this;
                if(!objApp.state.isLogin){
                    warnLogin("登录后才能更新阅读状态哦");
                    return;
                }
                const params = new URLSearchParams();
                params.append("memberId", memberId);
                params.append("bookId", bookId);
                params.append("readState", readState);
                axios.post("/api/member/update_read_state",params)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            objApp.state.readState = json.data.readState.readState;
                        }else{
                            console.error(json);
                        }
                    })

            }
            ,onSubmit: function (formName) {
                //提交短评功能
                const form = this.$refs[formName];
                const objApp = this;
                const memberId = sessionStorage.mid;
                const bookId = getQueryString("bid");
                form.validate().then(function(){
                    const params = new URLSearchParams();
                    params.append("memberId", memberId);
                    params.append("bookId", bookId);
                    params.append("score", objApp.form.score);
                    params.append("content", objApp.form.content);
                    axios.post("/api/member/evaluate" , params)
                        .then(function(response){
                            const json = response.data;
                            if(json.code == "0"){
                                objApp.state.dialogVisible = false;
                                objApp.form.score = 5;
                                objApp.form.content = "";
                                objApp.showEvaluationList(bookId , true);
                            }else{
                                console.error(json);
                            }
                        })
                }).catch(function(e){console.debug("表单验证失败",e)});
            }
            ,enjoy : function(index){
                //点赞功能
                const memberId = sessionStorage.mid;
                const objApp = this;
                if(!objApp.state.isLogin){
                    warnLogin("登录后才能为短评点赞哦");
                    return;
                }
                const evaluation = objApp.evaluationList[index];
                const params = new URLSearchParams();
                params.append("evaluationId", evaluation.evaluation_id);
                axios.post("/api/member/enjoy" , params)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            evaluation.enjoy = json.data.evaluation.enjoy;
                        }else{
                            console.error(json);
                        }
                    })
            }
        }
        , mounted() {
            //初始化后数据操作
            const bookId = getQueryString("bid");
            const objApp = this;
            const uri = "/api/book/id/" + bookId;
            axios.get(uri).then(function(response){
                const json = response.data;
                if(json.code == "0"){
                    objApp.book = json.data.book;
                }else{
                    console.error(json);
                }
            });
            objApp.showEvaluationList(bookId , false);
            const mid = sessionStorage.mid;
            if(mid != null){
                axios.get("/api/member/select_by_id?memberId=" + mid)
                    .then(function(response){
                        const json = response.data;
                        if(json.code == "0"){
                            objApp.state.isLogin = true;
                            objApp.state.member = json.data.member;
                        }else{
                            console.error(json);
                        }
                    })
                axios.get("/api/member/select_read_state?memberId=" + mid + "&bookId=" + bookId)
                    .then(function (response){
                        const json = response.data;
                        if(json.code == "0"){
                            if(json.data.readState != null){
                                objApp.state.readState = json.data.readState.readState;
                            }else{
                                objApp.state.readState = -1;
                            }
                        }else{
                            console.error(json);
                        }
                    })
            }


        }
    };
    const app = Vue.createApp(main);
    app.use(vant);
    app.use(vant.Lazyload);
    app.mount("#app");
</script>
</body>
</html>